import React, { FC } from 'react';
import { Breadcrumb, Layout, Button, Popover, Modal } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  LogoutOutlined,
  UserAddOutlined,
  SearchOutlined,
  MoneyCollectOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';

const { confirm } = Modal;

const { Header } = Layout;
interface IProps {
  menuClick: () => void;
  isShow: boolean;
}

const PopMenuTips = (str: string) => {
  return '';
};

const BasicHeader: FC<IProps> = ({ isShow, menuClick }) => {
  return (
    <Header className="site-layout-background menu-header">
      <div className="header-left">
        {React.createElement(isShow ? MenuUnfoldOutlined : MenuFoldOutlined, {
          className: 'trigger',
          onClick: menuClick,
        })}
        <Breadcrumb className="nav-breadcrumb">
          <Breadcrumb.Item>首页</Breadcrumb.Item>
          <Breadcrumb.Item>登录</Breadcrumb.Item>
          <Breadcrumb.Item>详情</Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <div className="header-right">
        <div className="fast-menu">
          <Popover placement="bottom" content={'新增消费'}>
            <Button
              shape="circle"
              size="middle"
              icon={<MoneyCollectOutlined />}
            ></Button>
          </Popover>
          <Popover placement="bottom" content={'新增客户'}>
            <Button
              shape="circle"
              size="middle"
              icon={<UserAddOutlined />}
            ></Button>
          </Popover>
          <Popover placement="bottom" content={'搜索客户'}>
            <Button
              shape="circle"
              size="middle"
              icon={<SearchOutlined />}
            ></Button>
          </Popover>
        </div>
        <Button
          shape="circle"
          size="small"
          icon={<LogoutOutlined className="logout" />}
        ></Button>
      </div>
    </Header>
  );
};

export default BasicHeader;
